Day11 Css區塊

2023 iThome 鐵人賽

DAY 11

自我挑戰組

學習網頁前端基本的技術，包含如何使用HTML標籤跟CSS做出基本的網頁版型，了解bootstrap template如何建置網頁架構。系列第 11 篇

15th鐵人賽

jenny

2023-09-26 17:09:08

502 瀏覽

分享至

區塊的概念：
區塊是指html標籤中能夠在網頁顯示的範圍多為矩形區塊，主要與網頁的版型設定有關聯性。

框線：
因為框線圍著區塊，所有先介紹框線。
包含margin屬性，設定區塊對外顯示的範圍，
padding屬性：設定區塊的對內間距
border屬性：區塊框線設定

框線屬性：
1.border-style:border-style可以設定上下左右的邊框設定。

border-top-style:上框線
border-bottom-style:下框線
border-left-style:左框線
border-right-style:右框線
border-style:四個邊框框線

框線屬性值：
solid實線
dashed虛線
dotted:點狀虛線

<!DOCTYPE html>
<html>
    <head>
        <title>
            border
        </title>
        <meta charset="UTF-8">

    </head>
    <boby>
        <img src="dog.jpg" style="border-style: dashed;" border-color:black; width="600px">
    </boby>
</html>

2.border-color:
設定邊框的顏色，可以設定各方向邊框的顏色。

border-top-color:上框線顏色
border-bottom-color:下框線顏色
border-left-color:左框線顏色
border-right-color:右框線顏色
border-color:四個邊框框線顏色
範例(框線顏色是橘色):

<!DOCTYPE html>
<html>
    <head>
        <title>
            border
        </title>
        <meta charset="UTF-8">

    </head>
    <boby>
        
        <h1 style="border-color:burlywood ; border-style:double ;text-align: center;">狗狗</h1>
    </boby>
</html>

3.border-width:
設定框線的粗細

border-top-width:上框線寬度
border-bottom-width:下框線寬度
border-left-width:左框線寬度
border-right-width：右框線寬度
border-width:四個邊框框線寬度

<!DOCTYPE html>
<html>
    <head>
        <title>
            border
        </title>
        <meta charset="UTF-8">

    </head>
    <boby>
        <img src="dog.jpg" style="border-style: dashed; border-color:black; border-width: thin ;width:150px">
        <img src="dog.jpg" style="border-style: dashed; border-color:black; border-width:medium ;width:150px">
        <img src="dog.jpg" style="border-style: dashed; border-color:black; border-width:thick ;width:150px">
        <img src="dog.jpg" style="border-style: dashed; border-color:black; border-width:12px; width:150px">
    </boby>
</html>

框線間距：

1.margin:
設定區塊的對外間距，屬性值是數字，越大距離越遠。

<!DOCTYPE html>
<html>
    <head>
        
        <meta charset="UTF-8">
        <title>map</title>
    </head>
    <body>
        <p style="background-color: indianred;">Netflix 2023 電影片單真的太狂啦！除了輪流霸榜 Top 1，由「007」丹尼爾克雷格主演的《鋒迴路轉：抽絲剝繭》和「蝙蝠俠」克里斯汀貝爾主演的驚悚片《淡藍之眸》～</p>
        <p style=" margin: 1cm; background-color: indianred;">Netflix 2023 電影片單真的太狂啦！除了輪流霸榜 Top 1，由「007」丹尼爾克雷格主演的《鋒迴路轉：抽絲剝繭》和「蝙蝠俠」克里斯汀貝爾主演的驚悚片《淡藍之眸》</p>

    </body>
</html>

2.padding:
設定區塊對內間距，數字越大，區塊與內容距離越遠。

<!DOCTYPE html>
<html>
    <head>
        
        <meta charset="UTF-8">
        <title>map</title>
    </head>
    <body>
        <p style=" background-color: indianred;">Netflix 2023 電影片單真的太狂啦！除了輪流霸榜 Top 1，由「007」丹尼爾克雷格主演的《鋒迴路轉：抽絲剝繭》和「蝙蝠俠」克里斯汀貝爾主演的驚悚片《淡藍之眸》～</p>
        <p style=" padding: 1cm; background-color: indianred;">Netflix 2023 電影片單真的太狂啦！除了輪流霸榜 Top 1，由「007」丹尼爾克雷格主演的《鋒迴路轉：抽絲剝繭》和「蝙蝠俠」克里斯汀貝爾主演的驚悚片《淡藍之眸》</p>

    </body>
</html>